<template>
	<view class="navbar">
		<view class="back" @click="deviceBack()">
			<image :src="`${baseImageUrl}/common/back.png`"></image>
		</view>
		<view class="title">
			<slot></slot>
		</view>
		<view class="right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	import {
		back_url
	} from "@/utils/config.js"
	export default {
		props: {
			lock: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {
			deviceBack() {
				if (this.lock) return false;
				let routes = getCurrentPages();
				let url = routes[routes.length - 1].route;
				if (back_url.includes(url)) {
					let number = this.$store.state.tabbarIndex;
					this.redirectRouter(number);
				} else {
					this.backRouter();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.navbar {
		width: 100%;
		height: $navbarHeight;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		background: url(#{$baseImageUrl}/common/nav_bg.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		position: relative;
		z-index: 99999;

		.title {
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: 400;
			font-family: LiSu;
		}

		.back {
			width: 102rpx;
			height: 52rpx;
			position: absolute;
			left: 35rpx;
			bottom: 12rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			position: absolute;
			right: 35rpx;
			bottom: 12rpx;
		}
	}
</style>